import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import Avatar from 'material-ui/Avatar';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FontIcon from 'material-ui/FontIcon';
import { Tabs, Tab } from 'material-ui/Tabs';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import { Toolbar, ToolbarSeparator, ToolbarGroup, ToolbarTitle } from 'material-ui/Toolbar';

export default class AppToolbar extends Component {
  state = {
    value: '',
    tabsValue: '/find'
  };

  componentWillReceiveProps (nextProps) {
    let tabsValue = nextProps.url;

    this.setState({tabsValue});
  }

  /**
   * 修改value值
   */
  handleChange = (event, value) => {
    this.setState({value});
  };

  /**
   * 跳转界面，清除通知
   */
  _pushWithClear = (type, pushTo) => {
    this.props.clearNotification(type);
    this.props.replaceTo(pushTo);
  };

  /**
   * 搜索
   */
  _search = () => {
    if (this.state.value != '') {
      this.props.replaceTo('/search/'+this.state.value);

      // 发起事件
      var evt = new CustomEvent('getNewSearchRequest', {detail: {title: this.state.value}});
      window.dispatchEvent(evt);

      this.setState({value: ''});
    }
  };

  /**
   * 更换URL时更改初始数据
   * 在切换tab调用
   */
  _pushWithUpdate = (pushUrl) => {
    this.props.pushTo(pushUrl);
  };

  /**
   * 从子页面返回
   */
  _goBack = () => {
    this.props.backTo();
  };

  /**
   * 返回选项卡
   */
  _renderTabs = (url) => {
    const findTabs = (
      <FindTabs
        color500={this.props.color500}
        tabsValue={this.state.tabsValue}
        pushWithUpdate={this._pushWithUpdate}
        isSmallViewport={this.props.isSmallViewport}
      />
    );

    const activityTabs = (
      <ActivityTabs
        color500={this.props.color500}
        tabsValue={this.state.tabsValue}
        pushWithUpdate={this._pushWithUpdate}
        isSmallViewport={this.props.isSmallViewport}
      />
    );

    switch(url)
    {
      case '/find':
        return findTabs;
      case '/find/girls':
        return findTabs;
      case '/find/boys':
        return findTabs;
      case '/activity/me':
        return activityTabs;
      case '/activity/join':
        return activityTabs;
      default:
        return;
    }
  };

  render() {
    const { url, userImg, title, color100, color400, color500 } = this.props;

    let defaultColor = 'rgb(255, 255, 255)';

    let messageBadge = (
      <div style={{
        width: 8,
        height: 8,
        borderRadius: '50%',
        backgroundColor: '#F44336',
        position: 'absolute',
        top: 8,
        right: 8
      }}></div>
    );

    return (
      <Paper 
        className='header'
        style={{backgroundColor: color500}}
        zDepth={this.props.isChildrenPage ? 0 : 1}
      >
        <Toolbar style={{
          height: 64,
          paddingLeft: 8,
          paddingRight: 8,
          backgroundColor: color500
        }}>
          <ToolbarGroup>
            <IconButton 
              iconClassName={this.props.isChildrenPage ? 'icon-arrow_back' : 'icon-menu'}
              iconStyle={{color: defaultColor}}
              onClick={this.props.isChildrenPage ? this._goBack : this.props.handleTriggerDrawer}
            />

            <ToolbarTitle 
              text='大橙子' 
              style={{color: defaultColor, marginLeft: 8, cursor: 'pointer'}}
              onClick={this._pushWithUpdate.bind(this, '/i')} 
            />

            <ToolbarSeparator
              className='visible-sm visible-md visible-lg'
              style={{backgroundColor: color400, marginLeft: 8, marginRight: 24}}
            />

            <ToolbarTitle 
              text={title} 
              className='visible-sm visible-md visible-lg'
              style={{color: defaultColor}} 
            />

            <Search
              value={this.state.value}
              search={this._search}
              color100={this.props.color100}
              color400={this.props.color400}
              defaultColor={defaultColor}
              handleChange={this.handleChange}
            />
          </ToolbarGroup>

          <ToolbarGroup>
            <IconButton
              iconClassName='icon-mode_edit'
              iconStyle={{color: defaultColor}}
              className='visible-sm visible-md visible-lg'
              onClick={this.props.handleOpen.bind(this, 'openNewActivity')}
            />

            <div className='visible-sm visible-md visible-lg' style={{position: 'relative'}}>
              <IconButton 
                iconClassName='icon-people'
                iconStyle={{color: defaultColor}}
                onClick={this._pushWithClear.bind(this, 'clear_messages', '/friends')}
              />
              {this.props.messages == 0 ? '' : messageBadge}
            </div>

            <More
              userId={this.props.userId}
              userImg={this.props.userImg}
              logout={this.props.logout}
              replaceTo={this.props.replaceTo}
              isSmallViewport={this.props.isSmallViewport}
            />
          </ToolbarGroup>
        </Toolbar>
        {this._renderTabs(url)}
      </Paper>
    );
  }
}

class Search extends Component {
  render() {
    return (
      <div className='visible-md visible-lg' style={styles.searchBox}>
        <TextField
          hintText='搜索活动'
          hintStyle={{color: this.props.color100}}
          underlineShow={false}
          value={this.props.value}
          onChange={this.props.handleChange.bind(this)}
          inputStyle={{color: this.props.defaultColor}}
          style={{
            width: 600,
            height: 48,
            paddingLeft: 16,
            paddingRight: 16,
            outline: 0,
            border: 0,
            borderRadius: 4,
            fontSize: 16,
            backgroundColor: this.props.color400,
          }}
        />
        <IconButton 
          disableTouchRipple={true}
          style={styles.searchIcon}
          onClick={this.props.search.bind(this)}>
          <FontIcon 
            className="icon-search" 
            color={this.props.color100}
          />
        </IconButton>
      </div>
    );
  }
};

class More extends Component {
  render() {
    return (
      <IconMenu
        iconButtonElement={
          <IconButton
            disableTouchRipple={true}
            style={{padding: 8}}
            children={this.props.isSmallViewport ? 
              <FontIcon className='icon-more_vert' color='#fff' />
              : <Avatar src={this.props.userImg} size={32}/>
            }
          />
        }
        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
      >
        <MenuItem 
          onTouchTap={this.props.replaceTo.bind(this, '/user/' + this.props.userId)}
          primaryText="我" 
          leftIcon={<Avatar src={this.props.userImg} />}
        />
        <MenuItem 
          onTouchTap={this.props.logout.bind(this)}
          primaryText="退出" 
          leftIcon={<FontIcon className="icon-exit_to_app" />}
        />
      </IconMenu>
    );
  }
};

class FindTabs extends Component {
  render() {
    return (
      <div style={{width: '100%', backgroundColor: this.props.color500}}>
        <Tabs
          className="center-block"
          value={this.props.tabsValue}
          inkBarStyle={{backgroundColor: '#fff'}}
          tabItemContainerStyle={{
            backgroundColor: this.props.color500,
            marginLeft: 'auto', 
            marginRight: 'auto'
          }}
          tabTemplateStyle={{
            width: this.props.isSmallViewport ? 'auto' : 224
          }}
          style={{
            width: this.props.isSmallViewport ? 'auto' : 672
          }}
        >
          <Tab
            value='/find'
            label={this.props.isSmallViewport ? '发现' : '寻找拥有相同兴趣的伙伴'}
            onActive={this.props.pushWithUpdate.bind(this, '/find')}
          />
          <Tab
            value='/find/girls'
            label="只看女生"
            onActive={this.props.pushWithUpdate.bind(this, '/find/girls')}
          />
          <Tab
            value='/find/boys'
            label="只看男生"
            onActive={this.props.pushWithUpdate.bind(this, '/find/boys')}
          />
        </Tabs>
      </div>
    );
  }
};

class ActivityTabs extends Component {
  render() {
    return (
      <div style={{width: '100%', backgroundColor: this.props.color500}}>
        <Tabs
          value={this.props.tabsValue}
          tabItemContainerStyle={{
            backgroundColor: this.props.color500,
            marginLeft: 'auto', 
            marginRight: 'auto'
          }}
          tabTemplateStyle={{
            width: this.props.isSmallViewport ? 'auto' : 224
          }}
          inkBarStyle={{backgroundColor: '#fff'}}
          style={{
            width: this.props.isSmallViewport ? 'auto' : 448
          }}
          className="center-block"
        >
          <Tab
            label="由我发布"
            value='/activity/me'
            onActive={this.props.pushWithUpdate.bind(this, '/activity/me')}
          />
          <Tab
            label="正在参与"
            value='/activity/join'
            onActive={this.props.pushWithUpdate.bind(this, '/activity/join')}
          />
        </Tabs>
      </div>
    );
  }
};

const styles = {
  barBtn: {
    width: 56,
    height: 56,
  },
  title: {
    position: 'absolute', 
    display: 'block', 
    left: 0, 
    right: 0, 
    textAlign: 'center', 
    zIndex: 100,
    padding: 4,
  },
  searchBox: {
    position: 'relative',
    marginLeft: 32
  },
  searchIcon: {
    position: 'absolute',
    right: 0,
    width: 48,
    height: 48,
  }
};
